import 'echarts/lib/chart/pie'

const getPieChart = (data, color) => {
  const defaultConfig = {
    backgroundColor: '#fff',
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b} : {c} ({d}%)'
    },
    // legend: {
    //   orient: 'vertical',
    //   left: 'left'
    // },
    // stillShowZeroSum: false,  // 如果数据和为 0，不显示饼图
    series: [
      // 重点在这里，以下代码实现图中效果，使用两个重合的饼形图实现此种效果。
      // 饼形图的大小位置等都一样。唯一不同的就是label中的position属性
      // （说明文字为“outer”，百分比为“inner”）
      // labelLine中的show属性（说明文字为false，百分比为true）
      // 和显示文字（一个显示百分比，一个显示说明文字）
      {
        name: '',
        type: 'pie', // 饼状图
        radius: '50%', // 大小
        center: ['50%', '50%'], // 显示位置
        data, // 数据,我们ajax获取
        label: {
          show: true,
          position: 'outer',
          // fontSize: 12,
          // fontWeight: 'bold',
          align: "left",
          formatter: '{b}: {c}'
        },
        itemStyle: {
          // labelLine: { // 指示线状态
          //   show: true,
          //   smooth: 0.2,
          //   length: 10,
          //   length2: 20
          // }
        }
      },
      {
        name: '',
        type: 'pie',
        avoidLabelOverlap: true,
        radius: '50%',
        center: ['50%', '50%'],
        data,
        label: {
          show: true,
          position: 'inner',
          // fontSize: 12,
          // fontWeight: 'bold',
          align: "left",
          formatter: (params)=>`${params.percent?params.percent:0}%`
        },
        itemStyle: {
          // labelLine: { // 指示线状态
          //   show: true,
          //   smooth: 0.2,
          //   length: 10,
          //   length2: 20
          // }
        }
      }
    ]
  }

  const opt = { ...defaultConfig}
  if(color && color.length>0){
    Object.assign(opt,{color})
  }
  return opt
}

export default { getPieChart }
